<template>
  <view>
    <YgSearch></YgSearch>
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#ea4350"
    ></u-tabs>
    <block v-if="current===0">
      <view class="composite">
        <navigator
          :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id"
          class="goods-item u-flex"
          v-for="item in goods"
          :key="item.goods_id"
        >
          <view class="goods-img u-flex-1 u-padding-10">
            <u-image
              width="100%"
              mode="widthFix"
              :src="item.goods_small_logo||'http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg'"
            ></u-image>
          </view>
          <view class="goods-info u-flex-2 u-flex-col u-row-around u-padding-10">
            <view class="goods-name">{{item.goods_name}}</view>
            <view class="goods-price">￥{{item.goods_price}}</view>
          </view>
        </navigator>
      </view>
    </block>
    <block v-else-if="current===1">销量</block>
    <block v-else-if="current===2">价格</block>
  </view>
</template>

<script>
/* 
上拉加载下一页  - 滚动条触底 加载下一页 
  1 下拉加载事件 滚动条触底事件  onReachBottom  (生命周期)
  2 先判断一下还有没有下一页  后台给我们返回了  总条数  页码  页容量 知道有没有下一页数据了！！ 
    1 如何判断还有没有下一页！！ （接口返回值）
      总页数 10 和当前页数  2 
      总页数 =  向上取整(总条数 / 页容量 )       21 / 10 = 2.1 


  3 对当前页码 加一即可 

下拉刷新
1 触发下拉刷新事件 
  1 pages.json 添加一个设置 允许下拉刷新
  2 添加一个下拉刷新事件 
2 下拉刷新要做的业务
  1 页面的感觉 像 重新打开一次页面一样 
  2 真实的流程
    1 清空 旧 goods数组 
    2 设置页码 为 1 
    3 发送一次请求 即可 
    4 不要一直显示  下拉窗口  

 */

// 全局变量 获取商品列表 请求参数
let params = {
  // 否	string	关键字
  query: "",
  // 否	string	分类id
  cid: "",
  // 否	number	页码
  pagenum: 1,
  // 否	number	页容量
  pagesize: 10,
};

// 总页数
let totalPage = 1;

export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      // 商品列表数组
      goods: [],
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
    // 发送请求获取列表数据
    async getGoodsSearch() {
      const res = await this.$u.api.getGoodsSearch(params);

      // 第一次发送请求 解构了空 this.goods 不会影响
      this.goods = [...this.goods, ...res.message.goods]; // 拼接数组

      // 计算总页数
      totalPage = Math.ceil(res.message.total / params.pagesize);

      console.log("数据回来了");
    },
  },
  async onLoad(option) {
    params.cid = option.id || 6; // 定死一个 6
    this.getGoodsSearch();
  },
  /**
   * 滚动条触底 分页 内置了节流    使用原生的  html+css +js 实现 一个滚动条触底事件 节流
   */
  onReachBottom() {
    // 1 判断有没有下一页
    // 1.1 当前页码 ++
    // 1.2 重新发送一次请求 获取下一页的数据
    // 1.3 data中的数组 不能直接写=  拼接旧数组 合并
    if (params.pagenum >= totalPage) {
      // 没有下一页
      // console.log("不要再滑动了没有数据了");
      uni.showToast({
        title: "没有数据了",
        icon: "none",
      });
    } else {
      params.pagenum++;
      this.getGoodsSearch();
    }
  },
  /**
   * 下拉刷新事件
   */
  async onPullDownRefresh() {
    this.goods = [];
    params.pagenum = 1;

    await this.getGoodsSearch(); // 异步！！

    uni.stopPullDownRefresh();
    console.log("关闭下拉刷新");
  },
};
</script>

<style>
.goods-item {
  /* 设置子项的高关于父项的高 默认值 */
  align-items: stretch;
}
</style>